<template>
	<cl-page>
		<view class="login-page">
			<!-- 返回按钮 -->
			<view class="back-button" @tap="goHome">
				<view class="back-icon">
					<cl-icon name="arrow-left" size="24" color="#fff"></cl-icon>
				</view>
				<text class="back-text">返回首页</text>
			</view>

			<!-- 背景装饰 -->
			<view class="bg-decoration">
				<view class="circle circle-1"></view>
				<view class="circle circle-2"></view>
				<view class="circle circle-3"></view>
			</view>

			<!-- 主内容区 -->
			<view class="main-content">
				<!-- Logo区域 -->
				<view class="logo-section">
					<view class="logo-container">
						<image src="/static/logo.png" class="logo" mode="aspectFit" />
						<view class="logo-glow"></view>
					</view>
					<text class="brand-title">阿蔓达医药</text>
					<text class="brand-subtitle">专业医药服务平台</text>
				</view>

				<!-- 登录表单 -->
				<view class="form-container">
					<cl-form ref="formRef" :model="form" :rules="rules">
						<!-- 用户名输入 -->
						<cl-form-item prop="username">
							<view
								class="input-container"
								:class="{ focused: focusedInput === 'username' }"
							>
								<view class="input-label">
									<text class="label-text">账号</text>
								</view>
								<view class="input-wrapper">
									<view class="input-prefix">
										<view class="icon-box user">
											<text class="icon-text">账</text>
										</view>
									</view>
									<input
										class="native-input"
										v-model="form.username"
										placeholder="请输入用户名/手机号"
										placeholder-class="placeholder-style"
										@focus="focusedInput = 'username'"
										@blur="focusedInput = ''"
									/>
								</view>
							</view>
						</cl-form-item>

						<!-- 密码输入 -->
						<cl-form-item prop="password">
							<view
								class="input-container"
								:class="{ focused: focusedInput === 'password' }"
							>
								<view class="input-label">
									<text class="label-text">密码</text>
								</view>
								<view class="input-wrapper">
									<view class="input-prefix">
										<view class="icon-box lock">
											<text class="icon-text">密</text>
										</view>
									</view>
									<input
										class="native-input"
										v-model="form.password"
										:type="showPassword ? 'text' : 'password'"
										placeholder="请输入密码"
										placeholder-class="placeholder-style"
										@focus="focusedInput = 'password'"
										@blur="focusedInput = ''"
									/>
									<view class="input-suffix" @tap="togglePassword">
										<view class="icon-box eye" :class="{ show: showPassword }">
											<text class="icon-text">{{
												showPassword ? "显" : "隐"
											}}</text>
										</view>
									</view>
								</view>
							</view>
						</cl-form-item>
					</cl-form>

					<!-- 记住密码和忘记密码 -->
					<view class="form-options">
						<view class="remember-container" @tap="toggleRemember">
							<view class="checkbox-custom" :class="{ active: rememberPassword }">
								<view v-if="rememberPassword" class="checkbox-inner"></view>
							</view>
							<text class="remember-text">记住密码</text>
						</view>
						<text class="forgot-link" @tap="forgotPassword">忘记密码？</text>
					</view>

					<!-- 登录按钮 -->
					<view
						class="login-button"
						:class="{ disabled: !canLogin, loading: loading }"
						@tap="login"
					>
						<text class="button-text" v-if="!loading">立即登录</text>
						<cl-loading :size="40" color="#fff" v-else />
						<view class="button-shine"></view>
					</view>

					<!-- 用户协议 -->
					<view class="agreement-section">
						<view
							class="checkbox-custom small"
							:class="{ active: agreed }"
							@tap="toggleAgreed"
						>
							<view v-if="agreed" class="checkbox-inner"></view>
						</view>
						<view class="agreement-text">
							<text>登录即代表同意</text>
							<text class="link" @tap.stop="toAgreement">《用户协议》</text>
							<text>和</text>
							<text class="link" @tap.stop="toPrivacy">《隐私政策》</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useCool } from "/@/cool";
import { useUserStore } from "/@/cool";

const { router, service } = useCool();
const user = useUserStore();

const loading = ref(false);
const agreed = ref(false);
const rememberPassword = ref(false);
const showPassword = ref(false);
const formRef = ref();
const focusedInput = ref("");

const form = reactive({
	username: "",
	password: "",
});

const rules = {
	username: [
		{ required: true, message: "请输入用户名" },
		{ min: 3, message: "用户名至少3个字符" },
	],
	password: [
		{ required: true, message: "请输入密码" },
		{ min: 6, message: "密码至少6位" },
	],
};

// 计算是否可以登录
const canLogin = computed(() => {
	return form.username && form.password && agreed.value && !loading.value;
});

// 页面加载
onMounted(() => {
	const savedUsername = uni.getStorageSync("savedUsername");
	const savedPassword = uni.getStorageSync("savedPassword");

	if (savedUsername && savedPassword) {
		form.username = savedUsername;
		form.password = savedPassword;
		rememberPassword.value = true;
		agreed.value = true;
	}
});

// 切换密码显示
function togglePassword() {
	showPassword.value = !showPassword.value;
}

// 切换记住密码
function toggleRemember() {
	rememberPassword.value = !rememberPassword.value;
}

// 切换协议同意
function toggleAgreed() {
	agreed.value = !agreed.value;
}

// 登录
async function login() {
	if (!canLogin.value) return;

	// 表单验证通过后，开始登录流程
	try {
		loading.value = true;

		// 登录前清理localStorage，防止数据冲突
		user.clear();

		// 调用登录API
		const result = await service.user.login.password({
			username: form.username,
			password: form.password,
		});

		// 设置token和用户信息
		user.setToken(result);

		// 获取用户信息
		await user.get();

		// 记住密码
		if (rememberPassword.value) {
			uni.setStorageSync("savedUsername", form.username);
			uni.setStorageSync("savedPassword", form.password);
		} else {
			uni.removeStorageSync("savedUsername");
			uni.removeStorageSync("savedPassword");
		}

		uni.showToast({ title: "登录成功", icon: "success" });

		setTimeout(() => {
			uni.switchTab({ url: "/pages/index/home" });
		}, 1000);
	} catch (error: any) {
		console.error("登录失败:", error);
		uni.showToast({
			title: error.message || "登录失败，请检查用户名密码",
			icon: "none",
		});
	} finally {
		loading.value = false;
	}
}

// 忘记密码
function forgotPassword() {
	uni.showToast({ title: "请联系管理员重置密码", icon: "none" });
}

// 跳转用户协议
function toAgreement() {
	router.push("/pages/user/doc");
}

// 跳转隐私政策
function toPrivacy() {
	router.push("/pages/user/doc");
}

// 返回首页
function goHome() {
	console.log("goHome function called");
	try {
		uni.switchTab({
			url: "/pages/index/home",
			success: () => {
				console.log("switchTab success");
			},
			fail: (err) => {
				console.log("switchTab failed:", err);
				// 如果switchTab失败，尝试使用reLaunch
				uni.reLaunch({
					url: "/pages/index/home",
					success: () => {
						console.log("reLaunch success");
					},
					fail: (err2) => {
						console.log("reLaunch failed:", err2);
					},
				});
			},
		});
	} catch (error) {
		console.log("goHome error:", error);
	}
}
</script>

<style lang="scss" scoped>
.login-page {
	min-height: 100vh;
	background: #ffffff;
	position: relative;
	overflow: hidden;
}

// 返回按钮
.back-button {
	position: absolute;
	top: 40rpx;
	left: 40rpx;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 16rpx 24rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 40rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
	pointer-events: auto;

	&:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}
}

.back-icon {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-text {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

// 背景装饰
.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.circle {
	position: absolute;
	border-radius: 50%;
	opacity: 0.6;
}

.circle-1 {
	width: 600rpx;
	height: 600rpx;
	background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
	top: -200rpx;
	right: -100rpx;
	opacity: 0.3;
	filter: blur(80rpx);
}

.circle-2 {
	width: 400rpx;
	height: 400rpx;
	background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
	bottom: -100rpx;
	left: -100rpx;
	opacity: 0.25;
	filter: blur(60rpx);
}

.circle-3 {
	width: 300rpx;
	height: 300rpx;
	background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.2;
	filter: blur(50rpx);
}

// 主内容
.main-content {
	position: relative;
	z-index: 10;
	padding: 0 48rpx;
}

// Logo部分
.logo-section {
	text-align: center;
	padding-top: 120rpx;
	margin-bottom: 80rpx;
}

.logo-container {
	position: relative;
	width: 200rpx;
	height: 200rpx;
	margin: 0 auto 40rpx;
}

.logo {
	width: 200rpx;
	height: 200rpx;
	position: relative;
	z-index: 2;
}

.logo-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 240rpx;
	height: 240rpx;
	background: radial-gradient(circle, rgba(74, 222, 128, 0.4) 0%, transparent 70%);
	filter: blur(40rpx);
	animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(0.9);
		opacity: 0.3;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.1);
		opacity: 0.6;
	}
}

.brand-title {
	display: block;
	font-size: 48rpx;
	font-weight: 800;
	color: #1a1a1a;
	letter-spacing: 4rpx;
	margin-bottom: 16rpx;
	background: linear-gradient(135deg, #22c55e 0%, #f97316 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.brand-subtitle {
	display: block;
	font-size: 28rpx;
	color: #8890a6;
	letter-spacing: 2rpx;
}

// 表单容器
.form-container {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 40rpx;
	padding: 60rpx 48rpx;
	box-shadow: 0 20rpx 60rpx rgba(74, 222, 128, 0.15);
	border: 2rpx solid rgba(255, 255, 255, 0.8);
}

.form-title {
	display: block;
	font-size: 40rpx;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 60rpx;
	text-align: center;
}

// 输入框容器
.input-container {
	margin-bottom: 40rpx;

	&:last-child {
		margin-bottom: 0;
	}

	&.focused {
		.input-label {
			.label-text {
				color: #22c55e;
				transform: translateY(-2rpx);
			}
		}

		.input-wrapper {
			border-color: #22c55e;
			background: #ffffff;
			box-shadow: 0 16rpx 40rpx rgba(34, 197, 94, 0.15);
			transform: translateY(-2rpx);
		}
	}
}

.input-label {
	margin-bottom: 16rpx;

	.label-text {
		font-size: 30rpx;
		color: #4a5568;
		font-weight: 600;
		transition: all 0.3s ease;
	}
}

.input-wrapper {
	display: flex;
	align-items: center;
	height: 112rpx;
	background: #f7f8fc;
	border-radius: 56rpx;
	padding: 0 30rpx;
	border: 3rpx solid transparent;
	transition: all 0.3s ease;
}

.input-prefix {
	margin-right: 20rpx;
}

.input-suffix {
	margin-left: 20rpx;
	padding: 16rpx;
	margin-right: -16rpx;
}

.icon-box {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;

	&.user {
		background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	}

	&.lock {
		background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
	}

	&.eye {
		width: 64rpx;
		height: 64rpx;
		background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);

		&.show {
			background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);

			.icon-text {
				color: #ffffff;
			}
		}
	}

	.icon-text {
		font-size: 28rpx;
		color: #ffffff;
		font-weight: 600;
	}
}

.native-input {
	flex: 1;
	height: 100%;
	font-size: 32rpx;
	color: #1a202c;
	font-weight: 500;
}

.placeholder-style {
	color: #a0aec0;
	font-weight: 400;
}

// 表单选项
.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 48rpx 0 56rpx;
}

.remember-container {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.checkbox-custom {
	width: 36rpx;
	height: 36rpx;
	border-radius: 10rpx;
	border: 3rpx solid #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;

	&.active {
		background: linear-gradient(135deg, #22c55e 0%, #f97316 100%);
		border-color: transparent;
	}

	&.small {
		width: 24rpx;
		height: 24rpx;
		border-radius: 8rpx;
	}
}

.checkbox-inner {
	width: 20rpx;
	height: 20rpx;
	background: #ffffff;
	border-radius: 4rpx;
	transform: scale(0.7);
}

.remember-text {
	font-size: 28rpx;
	color: #666;
}

.forgot-link {
	font-size: 28rpx;
	color: #22c55e;
	font-weight: 500;
}

// 登录按钮
.login-button {
	position: relative;
	height: 104rpx;
	background: linear-gradient(135deg, #22c55e 0%, #f97316 100%);
	border-radius: 52rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 16rpx 48rpx rgba(34, 197, 94, 0.35);
	transition: all 0.3s ease;

	&:active:not(.disabled) {
		transform: translateY(2rpx);
		box-shadow: 0 12rpx 32rpx rgba(34, 197, 94, 0.35);
	}

	&.disabled {
		opacity: 0.5;
		box-shadow: none;
	}

	&.loading {
		pointer-events: none;
	}
}

.button-text {
	position: relative;
	z-index: 2;
	font-size: 34rpx;
	color: #ffffff;
	font-weight: 600;
	letter-spacing: 4rpx;
}

.button-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	animation: shine 3s infinite;
}

@keyframes shine {
	0% {
		left: -100%;
	}
	50%,
	100% {
		left: 100%;
	}
}

// 协议部分
.agreement-section {
	display: flex;
	align-items: flex-start;
	gap: 16rpx;
	margin-top: 40rpx;
	justify-content: center;
}

.agreement-text {
	font-size: 20rpx;
	color: #999;
	line-height: 1.6;

	.link {
		color: #22c55e;
		margin: 0 8rpx;
		font-weight: 500;
	}
}

// 底部装饰
.bottom-pattern {
	display: flex;
	justify-content: center;
	gap: 16rpx;
	margin-top: 80rpx;
	padding-bottom: 60rpx;
}

.pattern-dot {
	width: 8rpx;
	height: 8rpx;
	background: #d0d5dd;
	border-radius: 50%;

	&:nth-child(2) {
		width: 24rpx;
		background: #22c55e;
		border-radius: 4rpx;
	}
}
</style>
